<style>
    input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
    input.ng-dirty.ng-valid { border: 2px solid #6bc502 }
  </style>

<div class="row m-2">
    <div class="col-4">
        <form novalidate [formGroup]="form" (ngSubmit)="submitForm(form)">
            <div class="form-group" *ngFor="let control of form.productControls">
                <label>{{control.label}}</label>
                <input class="form-control" name="{{control.modelProperty}}"
                    formControlName="{{control.modelProperty}}" />
                <ul class="text-danger list-unstyled" *ngIf="(formSubmitted || control.dirty) && !control.valid">
                    <li *ngFor="let error of control.getValidationMessages()">
                        {{error}}
                    </li>
                </ul>
            </div>
            <button class="btn btn-primary" type="submit" [disabled]="formSubmitted && !form.valid"
                [class.btn-secondary]="formSubmitted && !form.valid">
                Create
            </button>
        </form>
    </div>
    <div class="col-8">

        <div class="checkbox">
            <label>
                <input type="checkbox" [(ngModel)]="showTable" />
                Show Table
            </label>
        </div>
    
        <div class="checkbox">
            <label>
                <input type="checkbox" [(ngModel)]="darkColor" />
                Dark Cell Color
            </label>
        </div>
    
        <table *paIf="showTable" [paCellDarkColor]="darkColor"
                class="table table-sm table-bordered table-striped">
            <tr><th></th><th>Name</th><th>Category</th><th>Price</th><th></th></tr>
            <tr *paFor="let item of getProducts(); let i = index; let odd = odd;
                    let even = even" [class.bg-info]="odd" [class.bg-warning]="even">
                <td style="vertical-align:middle">{{i + 1}}</td>
                <td style="vertical-align:middle">{{item.name}}</td>
                <td style="vertical-align:middle">{{item.category}}</td>
                <td style="vertical-align:middle">{{item.price}}</td>
                <td class="text-xs-center">
                    <button class="btn btn-danger btn-sm" (click)="deleteProduct(i)">
                        Delete
                    </button>
                </td>
            </tr>
        </table>
    </div>

</div>